import React, {Component} from 'react';
import './css/login.css'
import MD5 from 'crypto-js/md5'
import Loading from '../img/timg.gif'

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: "admin",
            pas: "",
            style: {
                display: "none"
            }
        }
        this.keyUpHandel = this.keyUpHandel.bind(this);
        this.pasHandel = this.pasHandel.bind(this)
    }

    keyUpHandel(e) {
        const {user} = this.state
        console.log(e.target.value)
        this.setState({
            user: e.target.value
        })
    }

    pasHandel(e) {
        const {pas} = this.state
        this.setState({
            pas: MD5(e.target.value).toString()
        })
        if (e.keyCode==13){
            this.subMit()
        }
    }

    subMit() {
        const {style} = this.state
        const {pas} = this.state
        const {user} = this.state
        if (pas == (MD5("admin123")).toString() && user == "admin") {
            localStorage.setItem('token', JSON.stringify(MD5("admin123")))
            this.setState({
                style:{
                    display: "block"
                }
            })
               setTimeout(()=>{
                   this.props.history.push("/home")
               },1200)
        } else {
            alert("账号或者密码错误")
        }
    }

    render() {
        return (
            <div className="login">
                <div className='form'>
                    <input className="text" value={this.state.user} onChange={this.keyUpHandel} type="text"/>
                    <input onKeyUp={this.pasHandel} type="password"/>
                    <button className="btn" onClick={this.subMit.bind(this)}>登录</button>
                </div>
                <img style={this.state.style} className="loading" src={Loading} alt=""/>
            </div>
        );
    }
}

export default Login;
